<template>
  <div class="page-view">
    <el-pagination
      background
      :current-page="pagerOptions.currPage"
      :page-sizes="pageSizes"
      :page-size="pagerOptions.pageSize"
      :layout="layout"
      :total="pagerOptions.totalCount"
      v-on="$listeners"
    >
    </el-pagination>
    <!-- :current-page.sync="searchParam.page"
        :page-size="searchParam.pageSize"
        background
        :page-sizes="[15, 30]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @current-change="changePage"
        @size-change="handleSizeChange"
        @prev-click="prevPage"
        @next-click="nextPage" -->
  </div>
</template>

<script>
export default {
  name: "PagerView",
  props: {
    pageSizes: {
      type: Array,
      default: () => [5, 10, 20, 30, 40]
    },
    layout: {
      type: String,
      default: "total, sizes, prev, pager, next, jumper"
    },
    pagerOptions: {
      type: Object,
      default: () => {
        return {
          currPage: 1,
          pageSize: 10,
          totalCount: 0
        }
      }
    }
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.page-view {
  margin-top: 10px;
}
::v-deep {
.el-pagination__jump {
    color: #fff;
  }
  .el-pagination{
    background:#1F2935;
    border-radius: 6px;
  }
  .el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li{
    background:#1F2935;
  }
   .el-pagination.is-background .el-pager li {
    color:#fff;
  }
  .el-pagination__total {
    color: #fff!important;
  }
  .el-pagination__sizes {
    position:absolute;
    left:0;
    .el-select {
      .el-input--suffix {
        .el-input__inner {
          background: #1f2935 !important;
          color: #ffffff !important;
        }
      }
    }
  }
}
</style>
